<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习项目</title>
		<link rel="stylesheet" href="css/Java练习.css" />
		<script type="text/javascript">
		/*function showpage2()
		{
		//隐藏page1
		document.getElementById("page1").style.display="none";
		//显示page2
		document.getElementById("page2").style.display="block";
		}
		function showpage3()
		{
		//隐藏page2
		document.getElementById("page2").style.display="none";
		//显示page3
		document.getElementById("page3").style.display="block";	
		}
		function showpage4()
		{
		//隐藏page3
		document.getElementById("page3").style.display="none";
		//显示page4
		document.getElementById("page4").style.display="block";
		}*/
		function showpage(num)
		{
			//隐藏所有page
			document.getElementById("page1").style.display="none";
			document.getElementById("page2").style.display="none";
			document.getElementById("page3").style.display="none";
			document.getElementById("page4").style.display="none";
			//根据num的值显示某个页面
			if(num==1)
			{
				document.getElementById("page1").style.display="block";
			}
			else if(num==2)
			{
				document.getElementById("page2").style.display="block";
			}
			else if(num==3)
			{
				document.getElementById("page3").style.display="block";
			}
			else if(num==4)
			{
				document.getElementById("page4").style.display="block";
			}
		}
		function showcharm(num)
		{
			/*//隐藏第三页
			document.getElementById("page3").style.dispaly="none";
			//现实第四页
			document.getElementById("page4").style.dispaly="block";*/
			
			showpage(4);
			
			//根据num换背景图
			if(num==1)
			{
				document.getElementById("page4").style.backgroundImage="url(img/charm1.jpg)";
			}
			else if(num==2)
			{
				document.getElementById("page4").style.backgroundImage="url(img/charm2.jpg)";
			}
			else if(num==3)
			{
				document.getElementById("page4").style.backgroundImage="url(img/charm3.jpg)";
			}
		}
		</script>
	</head>
	<body>
		<!--<img src="img/15118376409340376.jpg">-->
		<audio src="audio/卓依婷 - 好运来 (DJ版).mp3" autoplay="autoplay"></audio>
		<div id="page1">
			<img id="aayh" src="img/4155098_103525026863_2.jpg">
			<img id="ayyh" src="img/$RP3ETKG.png" onclick="showpage(2);">
		</div>
		<div id="page2">
			<img id="ayhh" src="img/4155098_103525026863_2.jpg">
			<img id="aayyh" src="img/t015b72c76249b6e4cc.jpg" onclick="showpage(3);">
				<img id="fanhui2" src="img/1235.PNG" onclick="showpage (1);" />
		</div>
		<div id="page3">
			<img id="aayyhh" src="img/img-06610763799c580b8eca5b69729783ac.jpg" onclick="showcharm(1);"/>
			<img id="ayyhh" src="img/img-f7abc0b5d2a231d68fb59a0e689e5d27.jpg" onclick="showcharm(2);"/>
			<img id="ayhh1" src="img/img-f9d5db7792bc4ad5328a668243df34cc.jpg"  onclick="showcharm(3);"/>
			<img id="fanhui1" src="img/1235.PNG" onclick="showpage (2);" />
		</div>
		<div id="page4">
			<img id="fanhui" src="img/1235.PNG" onclick="showpage(3);" />
			
		</div>
	</body>
</html>
